import { RobotOutlined } from "@ant-design/icons"
import { Empty, List, Typography } from "antd"
import React, { memo, useMemo } from "react"

import { useChatStore } from "~store/chatStore"
import { getCurrentTimestamp, OIUUID } from "~util"

import ChatItem from "./ChatItem"

const ListEmpty = () => (
  <Empty
    image={<RobotOutlined className="text-8xl" />}
    description={
      <div className="chat-placeholder-layout">
        <Typography.Title level={5} className="chat-placeholder">
          Please enter your question!
        </Typography.Title>
      </div>
    }></Empty>
)
const ChatList = memo(
  ({
    isEnd,
    onScrollToBottom
  }: {
    isEnd?: boolean
    onScrollToBottom?: () => void | any
  }) => {
    const getContents = useChatStore((state) => state.getContents)
    const contents = useChatStore((state) => state.contents)
    const beforetimestamp = getCurrentTimestamp() - 1 * 60 * 60 * 1000
    const isend = useMemo(() => isEnd, [isEnd])
    const list = useMemo(() => {
      onScrollToBottom()
      console.log("update list")
      return getContents({ timestamp: beforetimestamp })
    }, [isend, contents])
    return (
      <List
        locale={{ emptyText: <ListEmpty /> }}
        dataSource={list}
        split={false}
        rowKey={(item) => OIUUID()}
        className="relative"
        renderItem={(item, index) => {
          // console.log(data, index, style)
          return (
            <List.Item className="min-w-0 w-full">
              <ChatItem
                item={item}
                isend={isend}
                index={index}
                contents={list}
              />
            </List.Item>
          )
        }}></List>
    )
  }
)
export default ChatList
